<template>
	<div class="columns py-6">
		<div class="column is-half is-offset-one-quarter">
			<el-card shadow="never">
				<div slot="header" class="has-text-centered has-text-weight-bold">
					👏🏻 新用户入驻
				</div>
				<div>
					<!-- 新用户注册表单 -->
					<el-form
						ref="registerFormRef"
						:model="registerFormModel"
						:rules="rules"
						v-loading="loading"
						status-icon
						label-width="100px"		
					>
						<!-- 用户名 -->
						<el-form-item label="用户名" prop="username">
							<el-input v-model.trim="registerFormModel.username" />
						</el-form-item>
						<!-- 邮箱 -->
						<el-form-item label="邮箱" prop="email">
							<el-input v-model.trim="registerFormModel.email" autocomplete="off" />
						</el-form-item>
						<!-- 密码 -->
						<el-form-item label="密码" prop="password">
							<el-input v-model.trim="registerFormModel.password" type="password" autocomplete="off" />
						</el-form-item>
						<!-- 确认密码 -->
						<el-form-item label="确认密码" prop="checkPassword">
							<el-input v-model.trim="registerFormModel.checkPassword" type="password" autocomplete="off" />
						</el-form-item>
						<!-- 立即注册 & 重置 按钮 -->
						<el-form-item>
							<el-button type="primary" @click="submitForm('registerFormRef')">立即注册</el-button>
							<el-button @click="resetForm('registerFormRef')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import { register } from '@/api/auth/auth'
// 引入 await-to-js 处理 async-await 出现的异常
import to from 'await-to-js'

export default {
  	name: 'Register',

	data() {
		// password 校验器
		const validatePassword = (rule, value, callback) => {
			if (value === "") {
				callback( new Error('请再次输入密码') )
			} else if (value !== this.registerFormModel.password) {
				callback( new Error('两次输入密码不一致') )
			} else {
				callback()
			}
		}

		return {
			// 指定 Register 表单是否加载，默认是 false
			loading: false,

			registerFormModel: {
				username: '',
				password: '',
				checkPassword: '',
				email: ''
			},

			rules: {
				username: [
					{ required: true, message: '请输入账号', trigger: 'blur' },
					{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
				],
				email: [
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{ type: 'email', message: "请输入正确的邮箱地址", trigger: [ 'blur', 'change' ] }
				],
				password: [ 
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
				],
				checkPassword: [
					{ required: true, message: '请再次输入密码', trigger: 'blur' },
					{ validator: validatePassword, trigger: 'blur' }
				]		
			},
    	};
	},

	methods: {
		// 注册
		submitForm(formName) {
			this.$refs[formName].validate(async valid => {
				// 若表单校验失败 =>
				if (!valid) return false

				// 若表单校验成功 =>
				this.loading = true

				// 执行注册操作
				const [ err, data ] = await to(register(this.registerFormModel))
				// 若注册失败 =>
				if (err) this.loading = false
				// 若注册成功 =>
				if (data.code == 200) {
					// 显示注册成功提示框
					this.$message( {  type: 'success', message: '注册成功' })

					// 跳转到 /login 
					setTimeout(() => {
						this.loading = false;
						this.$router.push({ path: this.redirect || '/login' })
					}, 0.1 * 1000)
				} else {
					this.$message.error('注册失败，' + message)
				}
			})
		},

		// 重置表单
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		
	}
}
</script>

<style scoped>
</style>